大家好！

我們今天要實作讓視窗能平滑地滾動到錨點。
我們進入今天的主題吧！

程式碼

(function (duration) {
    Felix('a[href^="#"]').on('click', scroll);

    function ease(t, b, c, d) {
        if ((t /= d / 2) < 1) return c / 2 * t * t + b;
        return -c / 2 * ((--t) * (t - 2) - 1) + b;
    }

    function scroll(e) {
        e.preventDefault();
        const anchor = Felix(encodeURI(this.hash))[0];
        const aPos = anchor.getBoundingClientRect().top;
        const wPos = window.pageYOffset;
        let startTime = null;

        function animation(currentTime) {
            if (startTime === null) startTime = currentTime;
            const time = currentTime - startTime;
            window.scrollTo(0, ease(time, wPos, aPos, duration));
            if (time < duration) requestAnimationFrame(animation);
            else {
                anchor.tabIndex = -1;
                anchor.focus();
            }
        }
        requestAnimationFrame(animation);
    }
})(1000);

上方的 ease 函式是用來調整頁面滾動的加速度，每次呼叫 animation 函式時就會提供 Y 軸的座標。
關於更多加速度函式，可參考 easings.net 和 spicyyoghurt.com 上的說明。

實測

<header id="header">
    <a href="#footer">Footer</a>
</header>
<footer id="footer">
    <a href="#header">Header</a>
</footer>

直接觀看範例

差不多也到尾聲了。
如果對文章有任何疑問，也歡迎在下方提問和建議！
我是 Felix，我們明天再見！